import React from 'react';
import classnames from 'classnames';

import './index.less';
import ReIcon from 'components/widgets/ReIcon';

export default class view extends React.Component {
    static propTypes = {
        className: React.PropTypes.string,
        type: React.PropTypes.string,
        list: React.PropTypes.array.isRequired,
        value: React.PropTypes.any.isRequired,
        onChange: React.PropTypes.func.isRequired
    };

    static defaultProps = {
        type: 'thumb',
        list: [],
        value: 0
    }

    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            value: props.value,
            list: props.list,
            isOpen: false,
            iconChoose:false
        };
    }

    componentWillMount() {
        this._isMounted = true;
    }

    componentDidMount() {
        // document.getElementById('wrap').addEventListener('m', () => {
        //     if (this.state.isOpen) {
        //         this.setState({
        //             isOpen: false
        //         });
        //     }
        // });
    }

    componentWillReceiveProps({value, list, isOpen}) {
        this.setState({
            value,
            list,
            isOpen
        });
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    getCurrentItem(attr) {
        let list = this.state.list;
        // console.log('=======',list)
        let data = {
            label: '',
            value: ''
        };
        if (this.props.type === 'thumb') {
            data = Object.assign({}, data, {
                thumb: ''
            });
        }
        for (var i in list) {
            if (list[i].value === this.state.value) {
                data = list[i];
            }
        }
        if (attr) {
            return data[attr];
        } else {
            return data;
        }
    }

    renderList() {
        return this.state.list.map((item, i) => {
            return this.renderItem(item, item.value === this.state.value ? 'active' : '', i);
        });
    }

    renderTitle() {
        let classNames = classnames({
            'show': this.state.isOpen,
            'pinkish': this.state.value ? false : true,
            'borderline':this.props.noBorder,
            'selected-wrap': this.state.value ? true : false,
        });
        return (
            <div className={classNames} onClick={(e) => this.handleToggleClick(e)}>
                <label className={this.state.value ? 'is-selected' : 'no-selected'}>
                    {this.state.value ? this.getCurrentItem('label') : this.props.placeholder}
                </label>
                {this.props.iconChoose?<ReIcon icon={this.state.isOpen?'shouhui':'xiala'} className="icon-toggle"/>
                    :<span></span>
                }
            </div>
        );
    }

    renderItemThumb(item) {
        return (
            <span>
                <img src={item.thumb}/>
            </span>
        );
    }
    renderIcon(item){
        return <ReIcon className="icon" icon={item.icon}/>
    }

    renderItem(item, active, i) {
        // console.log(item.label)
        return (
            <li className={active} key={i} onClick={(e) => this.handleCheckItemClick(e, item)}>
                {this.props.type === 'thumb' ? this.renderItemThumb(item) : null}
                {this.props.type === 'icon' ? this.renderIcon(item) : null}
                <label data-value={item.value}>{item.label}</label>
            </li>
        );
    }

    renderLabel() {
        return (
            <label
                className={this.props.labelClassName ? this.props.labelClassName + ' label' : 'label'}>
                {this.props.label || 'default'}
            </label>
        )
    }

    wrapLeave() {
        this.refs.ul.scrollTop = 0;
        this.setState({
            isOpen: false
        });
    }

    handleCheckItemClick(e, item) {
        e.stopPropagation();
        e.preventDefault();
        if(!$$.utils.IsPC()){
            setTimeout(() => {
                this.setState({
                    value: item.value
                });
                this.setState({
                    isOpen: false
                });
            }, 400);
        }else{
            this.setState({
                value: item.value
            });
            this.setState({
                isOpen: false
            });
        }
        this.props.onChange && this.props.onChange(item);
    }

    handleToggleClick(e) {
        this.setState({
            isOpen: !this.state.isOpen,
            isOpenMask:!this.isOpenMask
        });
        this.refs.ul.scrollTop = 0;
        e.preventDefault();
        e.stopPropagation();
    }

    render() {
        let classNames = classnames({
            'orin-sw-reselectfield-root': true,
            [this.props.className]: this.props.className ? true : false
        });
        let {openColor = '#fff'} = this.props;
        let styles = this.state.isOpen ? {backgroundColor: openColor} : {};
    
        let isOpenClassNames = classnames({
            'show': this.state.isOpen,
            'scroll-style': true
        });
        return (
            <div className={classNames}>
                {!this.props.isLabel ? '' : this.renderLabel()}
                <div className="wrap" id="wrap" onMouseLeave={() => this.wrapLeave()}>
                    {this.renderTitle()}
                    <ul ref="ul" className={isOpenClassNames}>
                        {/* {this.props.listTitle && <li className="title">{this.props.listTitle}</li>} */}
                        {this.renderList()}
                    </ul>
                </div>
            </div>
        );
    }
}
